<div id="charge_inquiry">
    <div class="charge_inquiry">
        <!--搜索栏-->
        <div class="searchBox">
            <el-input style="width: 220px;" readonly onclick="showJgTree();" v-model="parameters.jigouName" id="jgSel" placeholder="请选择机构"></el-input>
            <div id="jgFeeUserContent" class="jgFeeUserContent" style="display: none;position: absolute;z-index: 1000;overflow: auto;background:#ffffff;">
                <ul id="jgFeeUserTree" class="ztree" style="margin-top:0; width:220px;"></ul>
            </div>
            <el-select v-model="parameters.projectTypeInfo" placeholder="请选择项目类型" @change="getProject">
                <el-option label="请选择项目类型" value=""></el-option>
                <el-option
                        v-for="item in selectProjectType"
                        :key="item.value"
                        :label="item.projectTypeName"
                        :value="item.projectTypeId">
                </el-option>
            </el-select>
            <el-select v-model="parameters.projectInfo" placeholder="请选择收费项目" style="margin-left: 10px;">
                <el-option
                        v-for="item in selectCostName"
                        :key="item.value"
                        :label="item.projectName"
                        :value="item.projectId">
                </el-option>
            </el-select>
            <el-input
                    placeholder="请输入用户名进行搜素"
                    v-model="parameters.feeUserName"
                    style="width: 220px;margin-left: 20px;">
            </el-input>
            <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
        </div>

        <div class="DateBox">
            <el-select v-model="parameters.payStatus" placeholder="全部状态">
                <el-option label="全部缴费" value=""></el-option>
                <el-option label="待缴费" value="04"></el-option>
                <el-option label="已缴费" value="P-00"></el-option>
                <el-option label="缴费失败" value="缴费失败"></el-option>
                <el-option label="交易未明" value="交易未明"></el-option>
            </el-select>
            <el-date-picker
                    v-model="parameters.beginDate"
                    align="right"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择开始日期"
                    style="margin-left: 10px;"
                    :picker-options="pickerOptions">
            </el-date-picker>
            <el-date-picker
                    v-model="parameters.endDate"
                    align="right"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择结束日期"
                    style="margin-left: 10px;"
                    :picker-options="pickerOptions">
            </el-date-picker>
        </div>
        <!--导出按钮-->
        <el-row type="flex" class="table_btn">
            <el-col :span="24" class="btnTypeSet">
                <el-button size="small" type="primary" @click="exportPayment" icon="el-icon-plus">导出</el-button>
            </el-col>
        </el-row>

        <el-table
                size="mini"
                :data="tableData"
                @row-click="handleRowHandle"
                @cell-mouse-enter="mouseEnterEvent"
                align="center"
                style="width: 100%;text-align: center;">
            <el-table-column
                    align="center"
                    prop="feeId"
                    width="150"
                    label="缴费编号">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="100"
                    prop="feeUserName"
                    label="用户姓名">
            </el-table-column>
            <el-table-column
                    label="所属机构"
                    align="center"
                    prop="deptName"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="收费项目"
                    align="center"
                    prop="projectName"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="应缴金额"
                    align="center"
                    prop="totalAmt"
                    width="80">
            </el-table-column>
            <el-table-column
                    label="实缴金额"
                    align="center"
                    prop="factAmt"
                    width="80">
            </el-table-column>
            <el-table-column
                    label="缴费状态"
                    align="center"
                    prop="payStatus"
                    width="100">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            class="btn-Del"
                            v-if="scope.row.payStatus == '已缴费'? false: true"
                            @click="review(scope.$index, scope.row)">催缴</el-button>
                    <el-button
                            size="mini"
                            type="text"
                            class="btn"
                            v-if="scope.row.payStatus == '已缴费'? false: true"
                            @click="deleteRow(scope.$index, scope.row)">删除</el-button>
                    <el-button
                            size="mini"
                            type="text"
                            class="btn"
                            v-if="scope.row.payStatus == '已缴费'? false: true"
                            @click="revocation(scope.$index, scope.row)">撤回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页-->
        <div class="footerBox">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="totalCount">
            </el-pagination>
        </div>

        <!--详情弹出框-->
        <el-dialog class="dialogDetails" title="缴费信息" :visible.sync="dialogChargeInfoVisible">
            <div class="info-template-content">
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">缴费流水号</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payId}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">缴费人员</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.feeUserName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">所属机构</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.deptName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">缴费项目</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.projectName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">应缴金额</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.totalAmt}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">实缴金额</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.factAmt}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">催缴次数</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.urgeCnt}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">提醒</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.isRemind}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付流水号</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.paySeq}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付时间</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payDate}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付方式描述</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payType}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付状态</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payStatus}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">对账状态</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.isSettle}}</el-col>
                </el-row>
            </div>

        </el-dialog>
    </div>
</div>
<!--[if IE]>
<script>
    goIEPage(IEVersion(),'${basePath}/inquiryIE9');
</script>
<![endif]-->
<script>
    //加载机构树
    function showJgTree() {
        var cityObj = $("#jgSel");
        var cityOffset = $("#jgSel").offset();
        $("#jgFeeUserContent").slideDown("fast");

        $.post("${basePath}merchant/dept/togetDeptTree", function (json) {
            var treeObj = $.fn.zTree.init($("#jgFeeUserTree"), treeSetting, json.t);
            //默认展开所有节点
            //treeObj.expandAll(true);
        });
        $("body").bind("mousedown", onBodyDown);
    }

    // 当前页机构zTree
    var treeSetting = {
        check: {
            enable: true,
//            chkStyle: "checkbox",
//            chkboxType: { "Y": "p", "N": "s" }
        },
        data: {
            simpleData: {
                enable: true,
//                rootId: 0
            }
        },
        callback: {
            beforeClick: beforeClickJg,
            onCheck: onCheckJg
        }
    };

    function beforeClickJg(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("jgFeeUserTree");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    function onCheckJg(e, treeId, treeNode) {
        var jgTree = $.fn.zTree.getZTreeObj("jgFeeUserTree"),
            jgNodes = jgTree.getCheckedNodes(true),
            checkJg = '',
            jgVal = "";
        for (var i=0, l=jgNodes.length; i<l; i++) {
            jgVal += jgNodes[i].name + ",";
            if(!jgNodes[i].isParent){
                checkJg +=  jgNodes[i].id + ',';
            }
        }
        if (jgVal.length > 0 ) jgVal = jgVal.substring(0, jgVal.length-1);
        if (checkJg.length > 0 ) checkJg = checkJg.substring(0, checkJg.length-1);
        charge_inquiry.parameters.jigouName = jgVal;
        charge_inquiry.parameters.treeId = checkJg;
    }

    function jgHideMenu() {
        $("#jgFeeUserContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }

    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" ||
            event.target.id == "jgSel" ||
            event.target.id == "jgFeeUserContent" ||
            $(event.target).parents("#jgFeeUserContent").length>0)) {
            jgHideMenu();
        }
    }

    var charge_inquiry =
            new Vue({
                el: "#charge_inquiry",
                data: {
                    selectProjectType:[],
                    selectCostName:[],
                    value: '',
                    pageSize: 10,
                    tableData: [],
                    chargeInfo:{
                        feeUserId:"",
                        projectId:'',
                        selectProjectType:'',//项目类型集合
                        selectCostName:'',//项目名称集合
                        payId:'', // 缴费流水号
                        feeUserName:'', // 用户姓名
                        deptName:'', // 所属机构
                        projectName:'', // 收费项目
                        urgeCnt:'',//催缴次数
                        totalAmt:'', // 应缴金额
                        factAmt:'', // 实缴金额
                        isRemind:'',//是否还需要提醒 0：是 1：否
                        payStatus:'', // 缴费状态
                        paySeq:'',//支付流水号
                        payDate:'',//支付时间
                        payType:'',//支付类型01 pos 02 现金
                        isSettle:''//是否对账
                    },
                    dialogChargeInfoVisible:false,
                    // 分页
                    currentPage: 1,
                    totalCount:'',
                    totalPage:'',
                    parameters:{
                        'currentPage':'',
                        jigouName:'',
                        treeId : '',//机构
                        projectTypeInfo : '',//项目类型
                        projectInfo : '',//收费项目
                        feeUserName : '',//用户名模糊查询
                        payStatus : '',//缴费状态
                    },

                    pickerOptions: {
                        disabledDate:function(time) {
                            return time.getTime() > Date.now();
                        },
                        shortcuts: [{
                            text: '今天',
                            onClick:function(picker) {
                                picker.$emit('pick', new Date());
                            }
                        }, {
                            text: '昨天',
                            onClick:function(picker) {
                                var date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', date);
                            }
                        }, {
                            text: '一周前',
                            onClick:function(picker) {
                                var date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }]
                    },
                    beginDate:'',//开始时间
                    endDate: '',//结束时间
                },
                methods: {
                    getProject:function(){
                        var options= {projectTypeId:this.parameters.projectTypeInfo};
                        if(this.parameters.projectTypeInfo == ""){
                            charge_inquiry.parameters.projectInfo = "";
                            return;
                        }
                        sendService('${basePath}merchant/mProjectType/getProjectNameMenu', options, function (resData) {
                            if(resData.status == 'success'){
                                charge_inquiry.selectCostName = resData.t.mProject;
                                if(charge_inquiry.parameters.projectTypeInfo == ''){
                                    charge_inquiry.parameters.projectInfo = '';
                                }else if(charge_inquiry.parameters.projectTypeInfo != '') {
                                    if (charge_inquiry.selectCostName.length == 0) {
                                        charge_inquiry.$message.warning('该项目类型下无收费项目');
                                        charge_inquiry.parameters.projectInfo = '';
                                    } else {
                                        charge_inquiry.parameters.projectInfo = charge_inquiry.selectCostName[0].projectId;
                                    }
                                }

                            }
                        })
                    },
                    mouseEnterEvent: function(row, event, column){
                        if(event.label == '操作'){
                            column.style.cursor="default"
                        }
                        if(event.label != '操作'){
                            column.style.cursor="pointer"
                        }
                    },
                    // 分页加载数据
                    handleCurrentChange: function(currentPage){
                        Pagesearch(this,'${basePath}/merchant/payment/getFeeUserList', this.parameters,currentPage,
                            function (resData) {
                                if (resData.status == 'success') {
                                    resData.t.forEach(function (item) {
                                        if(item.payDate == null){

                                        } else {
                                            item.payDate = new Date(item.payDate).Format('yyyy-MM-dd');
                                        }
                                        if (item.payStatus == '04') {
                                            item.payStatus = '待缴费'
                                        } else if (item.payStatus == 'P-00') {
                                            item.payStatus = '已缴费'
                                        }
                                        if (item.isRemind == '0') {
                                            item.isRemind = '是'
                                        } else if (item.isRemind == '1') {
                                            item.isRemind = '否'
                                        }
                                        if (item.payType == '01') {
                                            item.payType = 'POS'
                                        } else if (item.payType == '02') {
                                            item.payType = '现金'
                                        }
                                        if (item.isSettle == '0') {
                                            item.isSettle = '否'
                                        } else if (item.isSettle == '1') {
                                            item.isSettle = '是'
                                        }
                                    });
                                }
                            });
                    },
                    //删除
                    deleteRow: function(index, rows) {
                        stopMaoPao();
                        var that = this;
                        that.$confirm('此操作将永久删除该信息，是否继续','提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            var options ={"payId":rows.payId,"projectId":rows.projectId};
                            sendService('${basePath}/merchant/payment/deleteFormPayment',options,function (resData) {
                                if(resData.status == 'success'){
                                    that.$message({
                                        type: 'success',
                                        message: '删除成功!',
                                    });
                                    reloadPage('${basePath}merchant/payment/togetFeeUserList');
                                }else{
                                    that.$message({
                                        type: 'error',
                                        message: '删除失败!',
                                    });
                                }
                            });
                        }).catch(function () {
                            that.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        })
                    },
                    //催缴
                    review: function(index, rows) {
                        stopMaoPao();
                        var that = this;
                        that.$confirm('确认向此项待缴费发送催缴消息吗？','提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            var options ={"payId":rows.payId,"projectId":rows.projectId,"projectName":rows.projectName,"feeUserId":rows.feeUserId};
                            sendService('${basePath}/merchant/payment/reminderFeeUser',options,function (resData) {
                                if(resData.status == 'success'){
                                    that.$message({
                                        type: 'success',
                                        message: '催缴成功!',
                                    });
                                    reloadPage('${basePath}merchant/payment/togetFeeUserList');
                                }else{
                                    that.$message({
                                        type: 'error',
                                        message: '催缴失败!',
                                    });
                                }
                            });
                        }).catch(function () {
                            that.$message({
                                type: 'info',
                                message: '已取消催缴'
                            });
                        })
                    },
                    // 撤回
                    revocation:function (index,rows) {
                        console.log(rows);
                        stopMaoPao();
                        var that = this;
                        that.$confirm('确认要撤回此项待缴费吗？','提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            var options ={"payId":rows.payId};
                            console.log(options);
                            // TODO 撤回请求后台数据
                            sendService('${basePath}/merchant/payment/recall',options,function (resData) {
                                if(resData.status == 'success'){
                                    that.$message({
                                        type: 'success',
                                        message: '撤回成功!',
                                    });
                                    reloadPage('${basePath}merchant/payment/togetFeeUserList');
                                }else{
                                    that.$message({
                                        type: 'error',
                                        message: '撤回失败!',
                                    });
                                }
                            });
                        }).catch(function () {
                            that.$message({
                                type: 'info',
                                message: '已取消撤回'
                            });
                        })
                    },
                    // 点击进入详情页
                    handleRowHandle:function (row,event,column) {
                            console.log(row);
                        if(column.label==='操作'){
                            return;
                        }else {
                            charge_inquiry.dialogChargeInfoVisible = true;
                            charge_inquiry.chargeInfo = row;
                        }
                    },
                    // 导出
                    exportPayment: function () {
                       window.location.href = "${basePath}merchant/payment/exportToExcel";
                    },
                    // 搜索按钮
                    searchFun: function(){
                        if(this.parameters.treeId == "" && this.parameters.projectTypeInfo == "" && this.parameters.projectInfo == ""
                            && this.parameters.feeUserName == "" && this.parameters.payStatus == ""
                            && this.parameters.beginDate == "" && this.parameters.endDate == "") {
                            reloadPage('${basePath}merchant/payment/togetFeeUserList');
                        }else {
                            Pagesearch(this, '${basePath}merchant/payment/getFeeUserList', this.parameters, 1,
                                function (resData) {
                                    if (resData.status == 'success') {
                                        resData.t.forEach(function (item) {
                                            if(item.payDate == null){

                                            } else {
                                                item.payDate = new Date(item.payDate).Format('yyyy-MM-dd');
                                            }
                                            if (item.payStatus == '04') {
                                                item.payStatus = '待缴费'
                                            } else if (item.payStatus == 'P-00') {
                                                item.payStatus = '已缴费'
                                            }
                                            if (item.isRemind == '0') {
                                                item.isRemind = '是'
                                            } else if (item.isRemind == '1') {
                                                item.isRemind = '否'
                                            }
                                            if (item.payType == '01') {
                                                item.payType = 'POS'
                                            } else if (item.payType == '02') {
                                                item.payType = '现金'
                                            }
                                            if (item.isSettle == '0') {
                                                item.isSettle = '否'
                                            } else if (item.isSettle == '1') {
                                                item.isSettle = '是'
                                            }
                                        });
                                    }
                                });
                        }
                    },
                },
                created: function () {
                    // 从后台获取请求数据的URL
                    Pagesearch(this,'${basePath}/merchant/payment/getFeeUserList', null,1,function (resData) {
                        if(resData.status == 'success'){
                            resData.t.forEach(function (item) {
                                if(item.payDate == null){

                                } else {
                                    item.payDate = new Date(item.payDate).Format('yyyy-MM-dd');
                                }
                                if (item.payStatus == '04') {
                                    item.payStatus = '待缴费'
                                } else if (item.payStatus == 'P-00') {
                                    item.payStatus = '已缴费'
                                }
                                if (item.isRemind == '0') {
                                    item.isRemind = '是'
                                } else if (item.isRemind == '1') {
                                    item.isRemind = '否'
                                }
                                if (item.payType == '01') {
                                    item.payType = 'POS'
                                } else if (item.payType == '02') {
                                    item.payType = '现金'
                                }
                                if (item.isSettle == '0') {
                                    item.isSettle = '否'
                                } else if (item.isSettle == '1') {
                                    item.isSettle = '是'
                                }
                            });
                        }
                    });
                    var options= {};
                    sendService('${basePath}merchant/mProjectType/getProjectTypeMenu', options, function (resData) {
                        if(resData.status == 'success'){
                            charge_inquiry.selectProjectType = resData.t.mProjectType;
                        }
                    });
                }
            });
</script>

<style scoped>
    .charge_inquiry .searchBox{
        height: 60px;
        line-height: 60px;
        text-align: left;
        padding-left: 30px;
        background: #fff;
    }
    .charge_inquiry .DateBox{
        height: 60px;
        line-height: 60px;
        text-align: left;
        padding-left: 30px;
        margin-bottom: 10px;
        background: #fff;
    }
    .charge_inquiry .table_btn{
        height: 60px;
        margin-bottom: 1px;
        background: #fff;
        padding: 14px 20px 0 30px;
    }
    .charge_inquiry .footerBox{
        width: 100%;
        height: 50px;
        text-align: right;
        background-color: #fff;
        padding-top: 9px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .el-dialog__body{
        padding: 40px 0 40px 100px;
    }
    .el-dialog__header span {
        padding-left: 20px;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #aaa;
        font-size: 22px;
    }
    .dialogDetails .el-dialog {
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }
    .el-dialog__header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__body {
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body {
        padding: 50px 0 0 0;
    }
    .dialogDetails .info-template-content .el-row:nth-child(even) {
        background-color: #efefef;
    }
    .dialogDetails .item-row {
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 100px;
    }
    .dialogDetails .item-row div:first-of-type {
        color: #aaa;
        text-align: left;
    }
    .dialogDetails .item-row div:last-of-type {
        color: #333;
        padding-left: 80px;
    }
    .dialogDetails .info-template-content .el-row:last-of-type {
        margin-bottom: 30px;
    }
</style>
